<!-- 物流信息 -->
<template>
    <div>
      <el-dialog :visible.sync="isShow" title="物流信息" top="5vh" width="60%">
        <div v-loading="load" v-if="detail">
          <h4>物流单号：{{detail.mailNo}}</h4>
          <el-scrollbar class="scrollbar">
            <div v-for="(item, index) in detail.routes" :key="index">
              <span>{{item.deliveryStatus == '0' ? '已取件' : '运输中'}}</span>
              <span class="flag">
                <i class="el-icon-d-caret"></i>
              </span>
              <span>{{item.acceptTime}}</span>
              <span class="remark">{{item.remark}}</span>
            </div>
            <div style="height: 30px"></div>
          </el-scrollbar>
        </div>
        <el-empty description="暂无物流信息" v-else></el-empty>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import product from '@/api/product/product'
  export default {
    name: "logisticsInfo",
    // props: {
    //   detail: {
    //     type: Object,
    //     default: () => ({})
    //   }
    // },
    data() {
      return {
        isShow: false,
        load: false,
        detail:{}
      };
    },
    watch: {
      // detail(newV) {
      //   if(!newV.mailNo) {
      //     this.visible = false
      //   }
      // }
    },
  
    components: {},
  
    computed: {},
  
    methods: {
        selectExpress(orderId){
            product.selectExpress({id:orderId}).then((res) => {
                this.detail = res[0];
            }).catch(() => {})
        }
    },
  };
  </script>
  <style lang="scss" scoped>
  .scrollbar {
    height: 100%;
    overflow: hidden;
    div {
      font-size: 12px;
      padding: 10px 0;
      .flag {
      padding: 0 20px;
      .dian {
        display: inline-block;
        padding: 0;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: black;
      }
    }
    .remark {
      padding-left: 20px;
    }
    }
  }
//   .el-scrollbar__wrap {
//     overflow-x: hidden;
//   }
  </style>
  